<template>
<div id="app">
<div id="left">
	<div class="left-list1 fl">
		<ul class="list1">
			<h3 style="
 text-shadow: .1rem 0rem .5rem #C4F0FC,-.1rem 0rem .5rem #C4F0FC,0rem .1rem .5rem #C4F0FC,0rem -.1rem .5rem #C4F0FC">绍兴市</h3>
			<li>越城区</li>
			<li>河桥区</li>
			<li>上城区</li>
			<li style="
 text-shadow: .1rem 0rem .5rem #C4F0FC,-.1rem 0rem .5rem #C4F0FC,0rem .1rem .5rem #C4F0FC,0rem -.1rem .5rem #C4F0FC">新昌县</li>
			<li>越城区</li>
			<li>河桥区</li>
		</ul>
	</div>
	<div class="left-list2 fl">
			<ul class="list2">
				<h4 style="color: #BF7951;font-size: 15px;font-weight:bold">违规建筑工地</h4>
				<li>棚户区拆除工程(12)</li>
				<li>二环道路工程(10)</li>
				<li style="color: #A3CFDA;">灵芝区工程(4)</li>				
				<li>天下花园工程(1)</li>
				<li style="color: #BF7951;margin-top: 30px;font-size: 15px;font-weight:bold;">未违规建筑工程</li>
				<li>泗汇江小区工程</li>
			</ul>
		</div>
		<div class="left-list3 fl">
			<div class="list3-top">灵芝小区工程(17/19)</div>
			<ul class="list3">
				<li><img src="../../assets/img/index/about.jpg" style="box-shadow: 0px 0px 20px #138FD3;"/></li>
				<li><img src="../../assets/img/index/about.jpg"/></li>
				<li><img src="../../assets/img/index/about.jpg"/></li>
				<li><img src="../../assets/img/index/about.jpg"/></li>
				<li><img src="../../assets/img/index/about.jpg"/></li>
			</ul>
		</div>
</div>
 <div class="clear"></div>
<div class="main-top">
	<img class="fl" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584542744018&di=3728ec2fc46bcaf6bf52424ad15aeace&imgtype=0&src=http%3A%2F%2Fimages.gofreedownload.net%2Fred-round-warning-sign-26991.jpg" />
    <div class="fl">智能识别预警:<span style="font-weight: normal;color: #BE9698;">灵芝小区工地 2号出入口 检测到未登记运输车辆</span></div>
</div>
<div class="zhushi">
	<h4>灵芝小区工程</h4>
	<p>2019年12月6日09:51:57</p>
</div>
<div id="right">
    <div class="right-top">
		<h3>灵芝小区工程</h3>
	</div>
	<div class="right-xinxi">
			<div class="xinxi-left">
				<div class="xinxi-left-top">基本信息</div>
				<div class="xian1 fr"></div>
				<ul>
					<li>工地类型:<span>建筑工地</span></li>
					<li>申报量:&nbsp;&nbsp;&nbsp;<span>400吨</span></li>
					<li>已收运量:<span>20吨</span></li>
				</ul>
			</div>
			<div class="xinxi-right">
				<div class="xinxi-right-top">管理员</div>
				<div class="xian2 fr"></div>
				<div class="xinxi-right-main">
					<img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1584453410&di=ecac35ab5ffe3739eb643663c26bcb6d&src=http://c.hiphotos.baidu.com/zhidao/pic/item/d009b3de9c82d1587e249850820a19d8bd3e42a9.jpg"/>
				    <div class="xinxi-right-main-p fr">
					<p class="xinxi-right-main-p1">王茗</p>
					<p class="xinxi-right-main-p2">1347954685</p>
				    </div>
				</div>
		    </div>
	</div>
	<div class="clear"></div>
    <div class="center-title">实时感知</div><div class="xian3 fr"></div>
	<div class="clear"></div>
	<div class="jindutiao">
		<ul class="yuan-ul">
			<li><Yuan></Yuan><span>PM2.5</span></li>
		    <li><Yuan></Yuan><span>PM10</span></li>
			<li><Yuan></Yuan><span>运输车次</span></li>
			<li><Yuan></Yuan><span>运输量</span></li>
		</ul>
	</div>
	<div class="clear"></div>
		<ul class="shujutu">
			<li class="shujutu1 fl">
			<div class="fl">各配送时段配送量情况</div>
			<div class="shujuku-p1 fl">本月</div><span class="span1 fl">上月</span>
		    <div class="clear"></div>
			<Shujutu></Shujutu>
		    </li>
		    <li class="shujutu1 fl">
		    <div class="fl">每月运送量趋势</div>
		    <div class="shujuku-p2 fl">本月</div><span class="span1 fl">上月</span>
		    <div class="clear"></div>
		    <Shujutu></Shujutu>
		    </li>
			<li class="shujutu1 fl">
			<div class="fl">累计违规次数</div>
			<div class="clear"></div>
			<Shujutu></Shujutu>
			</li>
			<li class="shujutu1 fl">
			<div class="fl">违规高发类型</div>
			<div class="clear"></div>
			<Shujutu></Shujutu>
			</li>
		</ul>
</div>
</div>
</template>
<script>
	import Yuan from '@/components/yuan-lj.vue'
	import Shujutu from '@/components/shujutu-lj.vue'
export default {
  data () {
    return {

    }
  },
  components: {
   Yuan,Shujutu
  },
  mounted () {
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped="scoped">
   *{
	   margin: 0;
	   padding: 0;
	   list-style-type: none;
   }
    .list3::-webkit-scrollbar {
     /*滚动条整体样式*/
     width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
     height: 1px;
     }
     .list3::-webkit-scrollbar-thumb {
     /*滚动条里面小方块*/
     border-radius   : 10px;
     background-color: skyblue;
     background-image: -webkit-linear-gradient(
         45deg,
         rgba(255, 255, 255, 0.2) 25%,
         transparent 25%,
         transparent 50%,
         rgba(255, 255, 255, 0.2) 50%,
         rgba(255, 255, 255, 0.2) 75%,
         transparent 75%,
         transparent
     );
     }
     .list3::-webkit-scrollbar-track {
     /*滚动条里面轨道*/
     box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
     background   : #ededed;
     border-radius: 10px;
     }
   .fl{
	   float: left;
   }
   .fr{
	   float: right;
   }
   .clear{
	   clear: both;
   }
   #app{
	   width: 110%;
	   height: 540px;
	   margin: 0 auto;
	   background-color: black;
	   background-image: url(../../assets/img/index/E6ECFE7E-BD48-4836-9A90-7C3A266641D2.png);
	   background-size:77.5% auto;
	   background-position:right;
	   background-repeat:no-repeat;
	   position: relative;
   }
   .main-top{
	   width:470px ;
	   height:30px;
	   border-radius: 8px;
	   background-color: #8D392D;
	   opacity: 0.8;
	   position: absolute;
	   top: 30px;
	   right: 650px;
	   border-radius: 16px;
   }
   .main-top img{
	   height:30px;
	   width:30px;
	   border-radius: 50%;
   }
   .main-top div{
	   line-height: 30px;
	   margin-left: 10px;
	   color: white;
	   font-size: 15px;
	   font-weight: bold;
   }
   .zhushi{
	   width:150px ;
	   height: 50px;
	   position: absolute;
	   right: 420px;
	   top: 490px;
   }
   .zhushi h4{
	   margin-left: 36px;
	   color: white;
   }
   .zhushi  p{
	   font-size: 12px;
	   color:#84888B ;
   }
   #left{
	   width:555px ;
	   height:100% ;
   }
   .left-list1{
	   width: 100px;
	   height: 100%;
	   background-color: #262D37;
	   opacity: 0.9;
	   box-shadow: 1px 1px 1px 1px #636469;
   }
   .list1{
	   padding: 10px 0 0 20px ;
	   color: white;
	   font-weight: bold;
   }
   .list1 li{
	   margin-top: 15px;
	   font-size: 14px;
   }
   .left-list2{
   	   width: 140px;
   	   height: 100%;
   	   background-color: #262D37;
   	   opacity: 0.9;
	   box-shadow: 1px 1px 1px 1px #636469;
   }
   .list2{
   	   padding: 15px 0 0 20px ;
   	   color: white;
   }
   .list2 li{
   	   margin-top: 15px;
   	   font-size: 12px;
	   color: #AAABAE;
   }
   .left-list3{
	   width: 240px;
	   height: 100%;
	   background-color: #262D37;
	   opacity: 0.9;
	   box-shadow: 1px 1px 1px 1px #636469;
   }
   .list3-top{
	   width: 200px;
	   height: 30px;
	   box-shadow: 1px 1px 1px 1px #8F94A4;
	   margin: 10px 10px 0;
	   line-height: 30px;
	   text-align: center;
	   font-weight: bold;
	   color: white;
	   background:linear-gradient(left,#20283B,#6A2429);
   }
   .list3{
	   width: 240px;
	   height: 500px;
	    overflow: hidden;
	    overflow-y: scroll;
		
   }
   .list3 li{
   	   padding: 10px 15px;
   }
   .list3 li img{
	   width: 200px;
	   height: 100px;
	   border-radius: 5px;
   }
 #right{
 	  width: 370px;
 	  height: 465px;
 	  box-shadow: 1px 1px 1px 1px #636469;
 	  margin: 50px 0 50px 0 ;
 	  background-color: #1C222B;
 	  color: white;
	  opacity:0.8;
	  position: absolute;
	  right: 50px;
	  top: -20px;
  }
  .right-top{
  		  width: 100%;
  		  height: 40px;
  		  border-bottom: 1px solid #2D313A;
  }
   .right-top h3{
 		  line-height: 40px;
 		  margin-left: 20px;
   }
  .right-xinxi{
 		  width: 100%;
 		  height:90px;
 		  margin: 12px 0 0 8px;
  }
  .xinxi-left{
 	  width: 30%px;
 	  height: 78px;
 	  float: left;
  }
  .xinxi-left-top{
 	   width: 100%;
 	   height: 15px;
 	   font-size: 14px;
 	   font-weight:bold;
  }
  .xinxi-left ul{
 	  margin:12px 0 0 12px;
  }
  .xinxi-left ul li{
  	  color: #84888B;
  	  font-size: 12px;
  }
  .xinxi-left ul li span{
 	  margin-left: 16px;
 	  color: white;
  	  font-size: 12px;
 	  font-weight:bold;
  }
  .xinxi-right{
 	  width: 55%;
 	  height:90px ;
 	  margin-left: 160px;
  }
  .xinxi-right-top{
 	  width: 100%;
 	  height: 15px;
 	  font-size: 14px;
 	  font-weight:bold;
  }
  .xinxi-right-main{
 	  width: 135px;
 	  height: 55px;
 	  margin-top: 10px;
 	  background-color: #2B2E37;
  }
  .xinxi-right-main img{
 	  width:40px;
 	  height: 40px;
 	  border-radius: 50%;
 	  overflow: hidden;
 	  margin: 10px 0 0 5px;
  }
  .xinxi-right-main-p{
 	  width: 80px;
 	  height: 40px;
 	  margin-top: 10px;
  }
  .xinxi-right-main-p1{
 	  font-size: 12px;
  }
  .xinxi-right-main-p2{
 	  margin-top: 5px;
  	  font-size: 12px;
 	  color: #8A8F92;
  }
  .center-title{
 	  width: 100%;
 	  height: 15px;
 	  font-size: 14px;
 	  font-weight:bold;
 	  margin-left: 12px;
  }
  .xian1{
  	  width: 65px;
  	  height: 1px;
  	  border-bottom:0.5px solid #2D313A;
  	  margin-top: -6px;
  }
  .xian2{
  	  width: 155px;
  	  height: 1px;
  	  border-bottom:0.5px solid #2D313A;
  	  margin: -6px 3px 0 0;
  }
  .xian3{
 	  width: 280px;
 	  height: 1px;
 	  border-bottom:0.5px solid #2D313A;
 	  margin: -6px 15px 0 0;
  }
  .jindutiao{
 	  margin-left:20px;
  }
 .yuan-ul li{
 	 float: left;
 	 margin-right: 15px;
 }
 .yuan-ul li span{
 	 margin-left: 18px;
 	 font-size: 12px;
 	 color: #8A8F92;
 }
 .shujutu{
 	 width: 100%;
 	 height: 220px;
 	 font-size: 12px;
 	 font-weight: bold;
 }
 .shujutu1{
 	 width: 175px;
 	 height: 110px;
 	 margin-left: 10px;
 }
 .shujuku-p1{
 	 text-decoration:underline;
 	 background-color:darkturquoise;
 	 font-size: 12px;
 	 color:#8A8F92;
	 margin-left: 5px;
 }
 .shujuku-p2{
	 text-decoration:underline;
	 background-color:darkturquoise;
	 font-size: 12px;
	 color:#8A8F92;
	 margin-left: 30px;
 }
 .span1{
 	 font-size: 12px;
 	 color:#8A8F92;
 }
 
</style>
